<template>
  <div>
    <div class="blue-line">
      <h2>业务查询</h2>
    </div>
    <!-- 查询表单 -->
    <h-row>
      <h-form>
        <h-row>
          <h-col span="9">
            <h-form-item label="用户名" prop="name">
              <h-input
                v-model="formItem.name"
                placeholder="请输入用户名"
                class="input"
              ></h-input>
            </h-form-item>
          </h-col>
          <h-col span="9" offset="1">
            <h-form-item label="产品名称" prop="phone">
              <h-input
                v-model="formItem.product_name"
                placeholder="请输入产品名称"
                class="input"
              ></h-input>
            </h-form-item>
          </h-col>
        </h-row>

        <h-row>
          <h-col span="9">
            <h-form-item label="订单类型" prop="applyId">
              <h-select v-model="formItem.order_type">
                <h-option value="subscribe"> 申购 </h-option>
                <h-option value="redeem"> 赎回 </h-option>
              </h-select>
            </h-form-item>
          </h-col>
          <h-col span="9" offset="1">
            <h-form-item label="订单状态" prop="confirm">
              <h-select v-model="formItem.confirm">
                <h-option value="Y"> 已确认 </h-option>
                <h-option value="N"> 未确认 </h-option>
              </h-select>
              <!-- TODO 此处应当有误 -->
            </h-form-item>
          </h-col>
          <h-col span="4" offset="1">
            <h-form-item>
              <h-button type="primary" @click="submit" icon="android-search"
                >查询</h-button
              >
            </h-form-item>
          </h-col>
        </h-row>
      </h-form>
    </h-row>
    <!-- 数据表格 -->
    <h-row>
      <h-table
        height="210px"
        :data="tableData1"
        :columns="tableColumns1"
        stripe
      ></h-table>
      <div >
        <div style="height: 10px"></div>
        <div>
          <h-page
            :current="page"
            :page-size="num"
            :total="total"
            :simple="true"
            :show-total="true"
            @on-change="handlePageChange"
            @on-page-size-change="handlePageSizeChange"
            :show-elevator="true"
          ></h-page>
        </div>
      </div>
    </h-row>
  </div>
</template>

<script>
import { orderList, orderSearch, orderCancel } from "@/api/order";
import { transform } from "@/utils/dateFormat";
export default {
  data() {
    return {
      page: 1,
      pageSize: 10,
      total: 100,
      tableData1: [
        {
          productDTO: {
            type: "string",
            name: "string",
            code: "string",
            risk: "string",
            status: "string",
            total_share: 0,
            net_worth: 0,
          },
          order_type: "string",
          num: "string",
          flow: 0,
          process_time: "string",
          name: "string",
          user_type: "string",
          confirm: "string",
          order_share: 0,
          confirm_id: "string",
          apply_id: "string",
        },
        {
          productDTO: {
            type: "string",
            name: "string",
            code: "string",
            risk: "string",
            status: "string",
            total_share: 0,
            net_worth: 0,
          },
          order_type: "string",
          num: "string",
          flow: 0,
          process_time: "string",
          name: "string",
          user_type: "string",
          confirm: "string",
          order_share: 0,
          confirm_id: "string",
          apply_id: "string",
        },
        {
          productDTO: {
            type: "string",
            name: "string",
            code: "string",
            risk: "string",
            status: "string",
            total_share: 0,
            net_worth: 0,
          },
          order_type: "string",
          num: "string",
          flow: 0,
          process_time: "string",
          name: "string",
          user_type: "string",
          confirm: "string",
          order_share: 0,
          confirm_id: "string",
          apply_id: "string",
        },
      ],
      formItem: {
        name: "",
        product_name: "",
        order_type: "",
        confirm: "",
      },
      tableColumns1: [
        {
          title: "用户名称",
          key: "name",
          fixed: "left",
        },
        {
          title: "用户类型",
          key: "user_type",
        },

        {
          title: "产品信息",
          key: "productDTO",
          width: 200,
          render: (h, params) => {
            return h(
              "Poptip",
              {
                props: {
                  trigger: "hover",
                  title: params.row.productDTO.name,
                  placement: "top",
                },
              },
              [
                h("Tag", params.row.productDTO.name),
                h(
                  "div",
                  {
                    slot: "content",
                  },
                  [
                    h("ul", {}, [
                      h("li", "产品代码：" + params.row.productDTO.code),
                      h("li", "风险等级：" + params.row.productDTO.risk),
                      h("li", "产品状态：" + params.row.productDTO.status),
                      h("li", "总份额：" + params.row.productDTO.total_share),
                      h("li", "净值：" + params.row.productDTO.net_worth),
                    ]),
                  ]
                ),
              ]
            );
          },
        },

        {
          title: "订单类型",
          key: "order_type",
        },

        {
          title: "银行卡号",
          key: "num",
          width: 200,
        },
        {
          title: "订单号",
          key: "apply_id",
          width: 200,
        },

        {
          title: "流水",
          key: "flow",
        },

        {
          title: "交易时间",
          key: "process_time",
          width: 150,
        },

        {
          title: "订单份额",
          key: "order_share",
        },

        // {
        //   title: "确认ID",
        //   key: "confirm_id",
        // },

        {
          title: "申请ID",
          key: "apply_id",
          width: 130,
        },

        {
          title: "订单状态",
          key: "confirm",
          width: 150,
          render: (h, params) => {
            const row = params.row;
            const color = row.confirm === "Y" ? "green" : "red";
            return h(
              "Tag",
              {
                props: {
                  type: "dot",
                  color: color,
                },
              },
              row.confirm === "Y" ? "已确认" : "未确认"
            );
          },
        },

        {
          title: "操作",
          key: "action",
          width: 100,
          align: "center",
          fixed: "right",

          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "warning",
                    size: "small",
                    icon: "backspace",
                    disabled: params.row.confirm === "Y",
                  },
                  on: {
                    click: () => {
                      this.showCancel(params.row.staus, params.row.apply_id);
                    },
                  },
                },
                "撤单"
              ),
            ]);
          },
        },
      ],
    };
  },

  mounted() {
    this.fetchData();
  },

  methods: {
    handlePageChange(page) {
      this.page = page;
      this.fetchData();
    },
    handlePageSizeChange(size) {
      this.pageSize = size;
      this.fetchData();
    },
    fetchData() {
      orderList({
        page: this.page - 1,
        num: this.pageSize,
      })
        .then((res) => {
          console.log(res);
          this.tableData1 = res.data.data.content;
          this.total = res.data.data.totalElements;
          this.transform();
          this.$hMessage.success("获取数据成功");
        })
        .catch((err) => {
          console.log(err);
          this.$hMessage.error("获取数据失败");
        });
    },

    transform() {
      // 遍历数组
      for (let i = 0; i < this.tableData1.length; i++) {
        // 修改 process_time 的值
        this.tableData1[i].order_type =
          this.tableData1[i].order_type === "subscribe" ? "申购" : "赎回";
        this.tableData1[i].process_time = transform(
          this.tableData1[i].process_time
        );
      }
      console.log(this.tableData1);
    },

    changePage(page) {
      this.page = page;
      this.fetchData();
    },

    submit() {
      orderSearch({
        page: this.page - 1,
        num: this.pageSize,
        // code: this.formItem.code,
        name: this.formItem.name,
        product_name:this.formItem.product_name,
        // apply_id: this.formItem.apply_id,
        // confirm: this.formItem.confirm,
      })
        .then((res) => {
          console.log('orderSearch',res);
          this.tableData1 = res.data.data.content;
          this.total = res.data.data.totalElements;
          this.transform();
          this.$hMessage.success("查询成功");
        })
        .catch((err) => {
          console.log(err);
          this.$hMessage.error("查询失败");
        });
    },

    showCancel(staus, apply_id) {
      if (staus === "Y") {
        this.$hMessage.warning("订单已确认，无法撤单");
        return;
      }
      this.$hMsgBox.confirm({
        title: "警告",
        content: "确定要撤回此订单吗？",
        onOk: () => {
          this.orderCancel(apply_id);
        },
        onCancel: () => {},
      });
    },

    orderCancel(apply_id) {
      orderCancel({
        apply_id: apply_id,
      })
        .then((res) => {
          console.log(res);
          this.$hMessage.success("撤单成功");
          this.fetchData();
        })
        .catch((err) => {
          console.log(err);
          this.$hMessage.error("撤单失败");
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.input {
  width: 50vh;
  margin-top: 0vh;
}
.blue-line {
  border-left: 3px solid #298dff;
  padding-left: 10px;
  margin-bottom: 3vh;
}
</style>